<%@page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/common/session.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=no, width=device-width">
    <title></title>
    <link rel="stylesheet" href="${ctx}/css/default.css"/>
    <script type="text/javascript" src="${ctx}/js/xtable.js"></script>
    <script type="text/javascript" src="${ctx}/js/calendar/WdatePicker.js"></script>
    <script type="text/javascript" src="${ctx}/dwr/engine.js"></script>
    <script type="text/javascript" src="${ctx}/dwr/util.js"></script>
    <script type='text/javascript' src='${ctx}/dwr/interface/BookService.js'></script>
    <script type='text/javascript' src='${ctx}/dwr/interface/CategoryService.js'></script>
    <script type="text/javascript" src="${ctx}/js/loading.js"></script>
</head>
<body>
<table width="100%">
    <tr>
        <td valign="top" colspan="2">
            <form id="bookForm" name="bookForm" onsubmit="return submitBook();">
                <input type="hidden" id="bookId" name="bookId" value="">
                <table width="100%" height="100%" cellspacing="5" cellpadding="5">
                    <tr>
                        <td>
                            <select id="categoryId" name="categoryId">
                                <option value="">请选择类别</option>
                            </select>
                        </td>
                        <td>
                            <input type="text" id="bookTitle" name="bookTitle" maxlength="50" placeholder="图书名称"/>
                        </td>
                        <td align="center">
                            <button type="submit" onclick="selectBookPage()">查询</button>
                        </td>
                    </tr>
                </table>
            </form>
        </td>
    </tr>
    <tr>
        <td width="50%" valign="top">
            <SCRIPT LANGUAGE="JavaScript" >
                var bookThead = new Array(
                    new XThead(""),
                    new XThead("图书名称"),
                    new XThead("操作")
                );

                var bookXTable = new XTable("book", bookThead);

                bookXTable.XTbodyArray = function (model) {
                    var array = new Array(
                        new XTbody("book", "<a href='" + model.bookFile + "' target='_blank'><img width=50 height=60 style='border:1px solid #c9c9c9' onerror='' src='" + model.bookCover + "'/></a>", "string", null, null, "center"),
                        new XTbody("book", model.bookTitle + "<br>" + model.bookCreateTime),
                        new XTbody("book", "<a href='javascript:void(0)' onclick=insertBookRank('" + model.bookId + "')>排行</a>", null, null, null, "center")
                    );
                    return array;
                }

                bookXTable.getXList = function (page){
                    var book = dwr.util.getValues("bookForm");
                    book.pageIndex = page;
                    book.pageSize = bookXTable.pageSize;
                    BookService.selectBookList(book, function(list){bookXTable.addTable(list);});
                }

                function selectBookPage(){
                    var book = dwr.util.getValues("bookForm");
                    BookService.selectBookNum(book, function(num){bookXTable.setTotalPage(num);});
                }
            </SCRIPT>
        </td>
        <td width="50%" valign="top">
            <SCRIPT LANGUAGE="JavaScript" >
                var bookRankThead = new Array(
                    new XThead(""),
                    new XThead("排行图书"),
                    new XThead("操作")
                );

                var bookRankXTable = new XTable("bookRank", bookRankThead, true);

                bookRankXTable.XTbodyArray = function (model) {
                    var array = new Array(
                        new XTbody("bookRank", "<a href='" + model.bookFile + "' target='_blank'><img width=50 height=60 style='border:1px solid #c9c9c9' onerror='' src='" + model.bookCover + "'/></a>", "string", null, null, "center"),
                        new XTbody("bookRank", model.bookTitle + "<br>" + model.bookCreateTime),
                        new XTbody("bookRank", "<a href='javascript:void(0)' onclick=deleteBookRank('" + model.bookId + "')>删除</a>", null, null, null, "center")
                    );
                    return array;
                }

                bookRankXTable.getXList = function (page){
                    var book = new Book();
                    BookService.selectBookRankList(book, function(list){bookRankXTable.addTable(list);});
                }
            </SCRIPT>
        </td>
    </tr>
</table>
</body>
</html>
<script>
    var category = new Category();
    category.categoryParentId = 1;
    CategoryService.selectCategoryList(category, function(list){
        dwr.util.addOptions("categoryId", list, "categoryId", "categoryName");
        selectBookPage();
        bookRankXTable.goPage(1);
    });

    function submitBook() {
        selectBookPage();
        return false;
    }

    function insertBookRank(bookId) {
        var bookRank = new BookRank();
        bookRank.bookId = bookId;
        BookService.insertBookRank(bookRank, function (bookRank) {
            bookRankXTable.goPage(1);
        });
    }

    function deleteBookRank(bookId) {
        var bookRank = new BookRank();
        bookRank.bookId = bookId;
        BookService.deleteBookRank(bookRank, function (bookRank) {
            bookRankXTable.goPage(1);
        });
    }
</script>
